{template 'common/header'}
    <ul class="nav nav-tabs">
        <li class=""><a href="{php echo $this->createWebUrl("templateset");}">模板管理</a></li>
        <li class="active"><a href="#">{php echo $data['id']>0 ? '通知模板' : '通知模板';}</a></a></li>    
        
    </ul>

<form action="" id="theform" name="theform"  method="post" class="form-horizontal form ng-pristine ng-valid" accept-charset="utf-8">
<input type="hidden" name="id" value="{$data['id']}" />
<input type="hidden" name="token" value="{$_W['token']}" />
<div class="panel panel-success">  
	<div class="panel-heading">
		模板基本信息&nbsp;&nbsp;
	</div>
                 
	<div class="panel-body">
        <div class="form-group">
            <label class="col-xs-12 col-md-3 col-lg-2 control-label">模板名称</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" placeholder="" name="template_name" id="template_name" value="{$data['template_name']}">
            	<span class="help-block">发放通知时选择对应模板</span>
            </div>                        
        </div>
        <div class="form-group">
            <label class="col-xs-12 col-md-3 col-lg-2 control-label">模板ID</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" placeholder="" name="template_id" id="template_id" value="{$data['template_id']}">
            	<span class="help-block">请访问微信公众平台获取通知消息模板ID</span>
            </div>                        
        </div>      
        <div class="form-group">
            <label class="col-xs-12 col-md-3 col-lg-2 control-label">消息文字颜色</label>
            <div class="col-xs-8">{php echo tpl_form_field_color('topcolor', $data['topcolor']);}
            	<span class="help-block" style="display:none">todo</span>
            </div>                        
        </div>
        <div class="form-group">
            <label class="col-xs-12 col-md-3 col-lg-2 control-label">消息链接地址</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" placeholder="" name="linkurl" id="linkurl" value="{$data['linkurl']}">
                <span class="help-block">粉丝点击这个通知消息时跳转的链接. 如果为空, 则会进入系统默认的链接</span>
            </div>                       
        </div>           
    
        <div class="form-group">
            <label class="col-xs-12 col-md-3 col-lg-2 control-label">消息标题</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" placeholder="" name="caption" id="caption" value="{$data['caption']}">
            	<span class="help-block">通知消息的头部信息, 用于说明通知消息的主要内容</span>
            </div>                       
        </div> 
        <div class="form-group">
            <label class="col-xs-12 col-md-3 col-lg-2 control-label">消息标题颜色</label>
            <div class="col-xs-8">{php echo tpl_form_field_color('captioncolor', $data['captioncolor']);}
            </div>                        
        </div>
        <div class="form-group">
            <label class="col-xs-12 col-md-3 col-lg-2 control-label">消息备注</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" placeholder="" name="remark" id="remark" value="{$data['remark']}">
                <span class="help-block">通知消息的结束部分, 用于补充说明</span>
            </div>                       
        </div> 
        <div class="form-group">
            <label class="col-xs-12 col-md-3 col-lg-2 control-label">消息备注颜色</label>
            <div class="col-xs-8">{php echo tpl_form_field_color('remarkcolor', $data['remarkcolor']);}
            </div>                        
        </div>
                             
    </div>        
</div>


<div class="panel panel-success">  
	<div class="panel-heading">
		模板消息关键字设置&nbsp;&nbsp;
	</div>                
	<div class="panel-body">
        <div class="form-group">
            <label class="col-xs-12 col-sm-3 col-md-2 control-label">提醒关健字说明</label>
            <div class="col-sm-8">
                <div class="help-block"><span style='color:red'>根据消息模板所使用的变量代码进行输入，有几个输入几个</span></div>
                <div class="help-block">关健字请输入自定义消息内容</div>
                <div class="help-block">代码为微信平台消息模板的{{keyword1.DATA}}除去.DATA的变量代码</div>
                <div class="help-block">文字色为显示此变量转换成功的文字颜色</div>
                <div class="help-block">当前最多可添加10个关键字</div>
            </div>
        </div>   
        <div class="form-group">
            <label class="col-xs-12 col-sm-3 col-md-2 control-label">示例说明</label>
            <div class="col-sm-8 col-xs-12">
                <div class="alert alert-info">
                    <img src="../addons/q_3354988381_notify/notify_tojishi_shangmen.png" width="80%" />
                </div>
            </div>
        </div>        
          
        <div class="form-group">
            <label class="col-xs-12 col-md-3 col-lg-2 control-label">关键字1内容</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" placeholder="" name="keyword1" id="keyword1" value="{$data['keyword1']}">
            </div>                        
        </div>
        <div class="form-group">
            <label class="col-xs-12 col-sm-2 col-md-2 control-label">关键字1代码 / 颜色</label>
            <div class="col-sm-3">
                <input type="text" name="keyword1code" value="{if !empty($data['keyword1code'])}{$data['keyword1code']}{else}keyword1{/if}" class="form-control">
            </div>
            <div class="col-sm-5">
                {php echo tpl_form_field_color('keyword1color', $data['keyword1color'])}
            </div>
        </div> 
                
        <?php $set_begin_num = 1;for ($i=2; $i<=10; $i++) {
        	$name = 'keyword'.$i;
            if (!empty($data[$name])) {
            	$set_begin_num = $i;
            }
        ?>                
		<div id="div_{$i}" {if empty($data[$name])}style="display: none;"{/if}>
            <div class="form-group">
                <label class="col-xs-12 col-md-3 col-lg-2 control-label">关键字{$i}内容</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="" name="{$name}" id="{$name}" value="{$data[$name]}">
                </div>                        
            </div>        
            <div class="form-group">
                <label class="col-xs-12 col-sm-2 col-md-2 control-label">关键字{$i}代码 / 颜色</label>
                <div class="col-sm-3">
                    <input type="text" name="{$name}code" value="{if !empty($data[$name . 'code'])}{php echo $data[$name . 'code'];}{else}{$name}{/if}" class="form-control">
                </div>
                <div class="col-sm-5">
                    <?php echo tpl_form_field_color($name . 'color', $data[$name . 'color']);?>
                </div>
            </div>        
        </div>
        <?php }?>
        <div class="form-group" id="add_keyword" {if !empty($data['keyword10'])}style="display: none;"{/if}>
            <div class="col-sm-5"></div>
            <div class="col-sm-7">
                <button id="bt_add_keyword" type="button" class="btn btn-warning">
                    <span class="glyphicon glyphicon-plus"></span> 添加关键字
                </button>
            </div>
        </div>  
              
    </div>
</div>    
		<div class="form-group">
			<div class="col-sm-12">
			<input type="submit"  name="submit" value="提交" class="btn btn-primary col-lg-1"/>
				
			</div>
		</div>

</form>

  
<script type="text/javascript">
require(['jquery', 'util'], function($, u){
	$(function(){
		//u.editor($('.richtext')[0]);	 
		$('#theform').submit(function(){
				var message = '';
				if($.trim($(':text[name=template_name]').val()) == '') {
					message += '必须输入模板名称<br>';
				}
				if($.trim($(':text[name=template_id]').val()) == '') {
					message += '必须输入模板ID<br>';
				}//textarea
				if($.trim($(':text[name=keyword1]').val()) == '') {
					message += '至少输入1个关键字<br>';
				}
				if(message) {
					u.message(message);
					return false;
				}
				return true;				
		});
		var set_begin_num = '{php echo $set_begin_num + 1}';
		$('#bt_add_keyword').click(function(){
			$('#div_' + set_begin_num).show();
			if (set_begin_num >= 10) {
				$('#bt_add_keyword').hide();
			}
			set_begin_num++;
		});
	});	
});
function getTemplateID() {//todo
	if(!confirm('将自动调用接口来获取模板ID. \n根据公众平台的限制, 一个账号最多能使用15个模板消息. \n多次调用将会产生重复的模板ID, 你可以访问公众平台来确定重复的ID并删除掉. \n确定要继续吗?')) {
		return;
	}
	require(['jquery'], function($) {
		
	});
}
</script>
{template 'common/footer'}